<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/css/detail.css">
    <link rel="stylesheet" href="/libs/font/iconfont.css">
</head>
<body>
    <!-- header -->
    <header class="header"></header>
    <!-- sidebar -->
    <div class="sidebar">
                <div class="cart">
                    <a href="./shopping.html">
                        <div class="item-icon">
                            <img src="/images/icon-cart-list.png">
                        </div>
                        <p class="text"></p> 
                    </a>   
                </div>
                <ul class="sidebar-ul">
                    <li class="items item">
                        <div class="item-icon">
                            <img src="/images/icon-online-01.png">
                        </div>
                        <p class="text">售前咨询</p>
                        <div class="bg"></div>
                        <div class="detail">
                            <div class="detail-item">
                                <div>
                                    <a class="name" id="YSF-BTN-HOLDERS" href="javascript:;">
                                        <img src="/images/icon-online-05.png" style="width: 23px; height: 23px;">
                                        在线咨询
                                    </a>
                                </div>
                                <p class="time">周一至周六: 9:00-18:00</p>
                            </div>
                            <div class="detail-item">
                                <p class="hotline">热线电话</p>
                                <p class="phone">400-6323-251</p>
                                <p class="time">周一至周六: 9:00-18:00</p>
                            </div>
                        </div>
                    </li>
                    <li class="items item">
                        <div class="item-icon">
                            <img src="/images/icon-online-02.png">
                        </div>
                        <p class="text">售后咨询</p>
                        <div class="bg"></div>
                        <div class="detail">
                            <div class="list">
                                <p class="text1">本商城购买</p>
                                <p class="text2">400-6323-251</p>
                            </div>
                            <div class="list">
                                <p class="text1">非本商城购买</p>
                                <p class="text2">请咨询您所购买的商家</p>
                            </div>
                            <a class="after-sales" href="" target="_blank">点击查看售后网点&gt;&gt;</a>
                        </div>
                    </li>
                    <li class="items item">
                        <div class="item-icon">
                            <img src="/images/icon-online-03.png">
                        </div>
                        <p class="text">官方微信</p>
                        <div class="bg"></div>
                        <div class="detail">
                            <div>
                                <img src="/images/share-weixin-01.jpg" style="width: 139px; height: 139px;">
                            </div>
                            <p class="mall">官方微信</p>
                        </div>
                    </li>
                    <li class="item" id="topBtn">
                        <div class="item-icon">
                            <img src="/images/icon-online-04.png">
                        </div>
                        <p class="text">TOP</p>
                    </li>
                </ul>
    </div>
    <!-- section -->
    <div class="mid" id="detail">
       
    </div>
    <script type="text/html" id="detailTemplate">
        
        <div class="mid-product">
            <!-- 商品图片展示 -->
            <div class="breadcrumbs"><label></label> <span>{{title}}</span></div>
            <div class="mid-product-preview">
                <img src="{{imgs[0]}}" class="zoom-image" data-image="{{imgs[0]}}" data-zoom-image="{{imgs[0]}}">
                                  
                <div class="mid-product-preview-picdetails">
                    <ul id="gal1">
                        {{each imgs src}}
                        <li class='change-btn'>
                            <a href="javascript:;" data-image="{{src}}" data-zoom-image="{{src}}">
                                    <img src="{{src}}" alt="">
                            </a>
                        </li>
                        {{/each}}
                    </ul>
                </div>
            </div>
            <!-- 商品信息 -->
            <div class="mid-product-info">
                <h3 class="mid-product-info-name">{{title}}</h3>
                <div class="mid-product-info-tips">{{ desc }}</div>
                <div class="mid-product-info-price" style="height:auto;">
                    <!-- 预定商品价格展示 -->
                    <span class="pord-dispri">￥<strong>{{price}}</strong></span>
                    <span class="pord-orpri">￥{{originPrice}}</span>
                </div>
                <div class="mid-product-info-detailbox">
                    <div class="pord-sold">包邮：
                        <span>{{saleNum}}</span>
                    </div>
                </div>
                <div class="mid-product-info-spec">
                    <label>配件：</label>
                    <ul>
                        {{each style type}}
                            <li><div class="prod-spec curren">{{type}}</div></li>
                          {{/each}}
                    </ul>
                </div>
                <div class="mid-product-info-btn">
                    <div class="mid-product-info-btn-num">
                        <label>数量</label>
                        <div class="pord-num">
                            <a href="javascript:;" class="sub" id="sub">
                                -
                            </a>
                            <input class="nummidbtn" id="shop-num" value="1">
                            <a href="javascript:;" class="plus" id="plus">+</a>
                        </div>
                    </div>
                    <div class="mid-product-info-btn-buy">
                            <a href="javascript:;" class="joincart-btn" id="add-to-cart-btn">加入购物车</a>
                    </div>
                </div>
            </div>
        </div>
        </script>
    <!-- footer -->
    <footer class="footer-box"></footer>
</body>
<script src="/libs/require/require.min.js" data-main="/js/detail"></script>
</html>